<template>
    <tr>
        <td class="check">
            <input type="checkbox" @change="checkthis(user.userId)">
        </td>
        <td class="status">{{ user.state }}</td>
        <td style="width:60px;">
            <div class="userphoto" @click="changeImg()">
                <img :src="user.img">
                <!-- <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg"> -->
                <!-- <img src="https://img.zcool.cn/community/01460b57e4a6fa0000012e7ed75e83.png@1280w_1l_2o_100sh.png"> -->
            </div>
        </td>
        <td style="width:7%;">
            <span v-show="!user.isEdit" style="width:60px;">{{ user.nickname }}</span>
            <!-- <input 
            v-show="user.isEdit" 
            type="text" 
            :value="user.nickname" 
            @blur="nameFocuse=1;handleBlur(user,$event,'nickname')"
            @focus="nameFocuse=0"
            ref="inputTitle"
            > -->
        </td>
        <td style="width:7%;">
            <span v-show="!user.isEdit" style="width:60px;">{{ user.sex }}</span>
            <!-- <select
            v-show="user.isEdit" 
            type="text" 
            :value="user.sex" 
            @blur="nameFocuse=1;handleBlur(user,$event,'sex')"
            @focus="nameFocuse=0"
            ref="inputTitle"
            >
            <option>男</option>
            <option>女</option>
            </select> -->
        </td>
        <td>
            <span v-show="!user.isEdit" style="width:240px">{{ user.school }}</span>
            <!-- <input 
            v-show="user.isEdit" 
            type="text" 
            :value="user.school" 
            @blur="schoolFocuse=1;handleBlur(user,$event,'school')"
            @focus="schoolFocuse=0"
            ref="inputTitle"
            > -->
        </td>
        <td style="width:14%;">
            <span v-show="!user.isEdit">{{ user.telephone }}</span>
            <!-- <input 
            v-show="user.isEdit" 
            type="text" 
            :value="user.telephone" 
            @blur="telephoneFocuse=1;handleBlur(user,$event,'telephone')"
            @focus="telephoneFocuse=0"
            ref="inputTitle"
            > -->
        </td>
        <td style="width:16%;">
            <span v-show="!user.isEdit">{{ user.username }}</span>
            <!-- <input 
            v-show="user.isEdit" 
            type="text" 
            :value="user.username" 
            @blur="emailFocuse=1;handleBlur(user,$event,'username')"
            @focus="emailFocuse=0"
            ref="inputTitle"
            > -->
        </td>
        <td style="width:14%;">
          <button class="changeUser" @click="handleEdit()">修改</button>
          <button class="deleteUser" @click="handleDelete(user.userId)">注销</button>
          <button class="audite" v-show="user.state==='正常'" @click="banUser(user.userId)">禁用</button>
          <button class="audite" v-show="user.state==='封禁'" @click="unLockUser(user.userId)">解禁</button>
        </td>
    </tr>
</template>

<script>
import axios from 'axios'
export default {
    name: 'UseradminItem',
    props:['user','checkThis'],
    data() {
        return {
            nickname:this.user.nickname,
            img:this.user.img,
            state:this.user.state,
            school:this.user.school,
            sex:this.user.sex,
            roles:this.user.roles,
            username:this.user.username,
        }
    },
    methods: {
        changeImg(){
            if(confirm('您确定要修改此用户的头像为默认头像吗？')){
                this.img = 'https://img.zcool.cn/community/01460b57e4a6fa0000012e7ed75e83.png@1280w_1l_2o_100sh.png'
                this.user.img = 'https://img.zcool.cn/community/01460b57e4a6fa0000012e7ed75e83.png@1280w_1l_2o_100sh.png'
            }
        },
        // 删除
        handleDelete(id){
          if(confirm('您确定要删除吗？')){
            // this.deleteTodo(id)
            axios.post(`http://123.57.251.41:8080/admin-user/delUser?id=${id}`,this.config).then(
                response =>{
                    console.log('删除成功了')
                    console.log(response.data.data.list)
                    this.users = response.data.data.list
                },
                error =>{
                    console.log(id)
                    alert("删除失败了",console.log(error))
                }
            )
          }
        },
        handleEdit(){
            // alert(this.user.nickname)
            this.$store.state.userAdmin = this.user
            this.$store.state.dialog = 6
        },
        // //编辑
        // handleEdit(user){
        //   if(user.hasOwnProperty.call('isEdit')){
        //     user.isEdit = true
        //   }else{
        //     this.$set(user,'isEdit',true)
        //   }
        //   this.$nextTick(function(){
        //     this.$refs.inputTitle.focus()
        //   })
        // },
        // handleBlur(user,e,thing){
        //     setTimeout(()=>{
        //         if(this.Focuse == 1){
        //             user.isEdit = false
        //             this.$bus.$emit('modifyListData',{isFirst:false,isLoading:true,errMag:'',users:[]})
        //             axios.post(`http://123.57.251.41:8080/admin-user/modifyUserInfo?username=${this.username}&sex=${this.sex}&nickname=${this.nickname}&img=${this.img}&state=${this.state}&school=${this.school}&roles=${this.roles}&userId=${this.user.userId}`).then(
        //                 response =>{
        //                     console.log('修改成功了')
        //                     console.log(response)
        //                 },
        //                 error =>{
        //                     console.log(this.username,this.sex,this.nickname,this.img,this.state,this.school,this.roles,this.user.userId)
        //                     alert("修改失败了",console.log(error))
        //                 }
        //             )
        //         }
        //         if(!e.target.value.trim()) return alert("输入不能为空")
        //         if(thing == 'sex'){
        //             this.sex = e.target.value
        //         }else if(thing == 'nickname'){
        //             this.nickname = e.target.value
        //         }else if(thing == 'img'){
        //             this.img = e.target.value
        //         }else if(thing == 'status'){
        //             this.status = e.target.value
        //         }else if(thing == 'school'){
        //             this.school = e.target.value
        //         }else if(thing == 'roles'){
        //             this.roles = e.target.value
        //         }else if(thing == 'username'){
        //             this.username = e.target.value
        //         }
        //     },50 );  
        //     // if(this.Focuse == 1) user.isEdit = false
        //     //     console.log(this.Focuse)
        //     //     if(!e.target.value.trim()) return alert("输入不能为空")
        // //   this.$bus.$emit('updateUser',user.id,e.target.value)
        // },
        //封号
        banUser(id){
            this.$store.state.dialog = 4
            this.$store.state.banId = id
        },
        //解封
        unLockUser(id){
            axios.post(`http://123.57.251.41:8080/admin-user/unLockUser?id=${id}`,this.config).then(
                response =>{
                    console.log('解禁成功了')
                    console.log(response.data.data.list)
                },
                error =>{
                    console.log(id)
                    alert(error,console.log(error))
                }
            )
        },
        checkthis(id){
            this.checkThis(id)
        }
    },
    mounted(){
        this.config ={
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'contentType': "application/json",
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
                    'token':JSON.parse(sessionStorage.getItem("token")),
                },
            }
    }
}
</script>

<style lang="less" scoped>
tr{
    background-color: #f9f9f9;
    a{
        color: #337ab7;
    }
}
.check{
    width: 40px !important;
}
.status{
    width: 60px;
}
td{
    // width: 14%;
    padding:2px;
    font-size: 16px;
    vertical-align: middle;
    span{
        display: inline-block;
        width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
    }
    input{
        width: 90%;
        text-overflow: ellipsis;
    }
    select{
        width: 90%;
        background-color: white;
        outline: none;
        border: 1px solid black;
    }
    button{
        border: 1px solid;
        border-radius: 2px;
        margin-right: 5px;
        font-size: 12px;
        padding: 4px 8px;
        cursor: pointer;
    }
    .changeUser{
        color: #71e2a3;
        background-color: #e7faf0;
        border-color: #d0f5e0;
    }
    .deleteUser{
        color: #ff9292;
        background-color: #ffeded;
        border-color: #ffdbdb;
    }
    .audite{
        color: #ffba00;
        background: #fff8e6;
        border-color: #ffe399;
    }
    .userphoto{
        width: 50px;
        height: 50px;
        margin: 0 10px;
        border-radius: 25px;
        overflow: hidden;
        text-align: center;
        // margin: 0 auto;
        img{
            width: 50px;
            height: 50px;
        }
    }
}
</style>